<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-22 14:43:01
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\basic\uiTabs\uiTabs.vue
 * CIMC-V2
-->
<template>
  <el-tabs
    :ref="info._id"
    v-model="activeName"
    v-ui-ref="vSetRef"
    class="uiTabs"
    :tab-position="info.extension.tabPosition.value"
    :type="info.extension.type.value"
    @tab-click="handleClick"
  >
    <template v-for="item in info.list" :key="item._id">
      <el-tab-pane :disabled="!!item.hidden" :label="item.label" :name="item._id">
        <div class="w-full scrollbar--light">
          <!-- <lazyComponent @intersected="intersected">
          </lazyComponent> -->
          <Widget :list="item.list" />
        </div>
      </el-tab-pane>
    </template>
  </el-tabs>
</template>
<script>
  import { defineComponent, defineAsyncComponent } from 'vue'
  import { actionsTask } from '@ve/eventTask/index'
  import { UiMixin, RefsInjectMixin } from '@ve/mixin'
  import { componentId } from '@/utils/unique'
  // import lazyComponent from '@ve/components/lazyComponent'
  export default defineComponent({
    name: 'UiTabs',
    components: {
      // lazyComponent,
      // 使用异步组件
      Widget: defineAsyncComponent(() => import('@ve/components/widget.vue')),
    },
    mixins: [UiMixin, RefsInjectMixin],

    data() {
      return {
        activeName: '',
      }
    },
    computed: {
      // getLayerPageHeight() {
      //   let dom = document.querySelector('.layer-page')
      //   return `${this.hasPreview ? (dom ? dom.clientHeight - 60 : 0) + 'px' : 'auto'}`
      // },
    },
    created() {
      if (!this.hasPreview) {
        this.info.list.forEach((row) => {
          if (!row._id) {
            row._id = `tab_${componentId(6)}`
          }
          row._pid = this.info._id
        })
      }
      this.activeName = ''
      if (this.info.list.length) this.activeName = this.info.list.find((el) => !el.hidden)?._id || ''
    },
    methods: {
      intersected(e) {
        console.log('intersected', e)
      },
      handleClick(e) {
        console.log(e.index)
        console.log(this.info)
        //切换tabs通知修改
        setTimeout(() => {
          this.$pub(`SplitpaneResized_${this.previewPageId()}`, true)
          // 拖拽模式不运行事件
          if (!this.hasPreview) return
          this.onHandClick()
          if (this.info.list[e.index].actions) {
            actionsTask(this, this.info, this.info.list[e.index].actions, {}, () => {
              console.log('TAB 完成了')
            })
          }
        }, 100)
      },
      $selectPage(id) {
        this.activeName = id
      },
      $hiddenPage(list) {
        this.setTabHidden(list, true)
      },
      setTabHidden(list, b) {
        for (let index = 0; index < list.length; index++) {
          if (index > 0 && this.info.list.find((el) => el._id == list[index])) {
            this.info.list.find((el) => el._id == list[index]).hidden = b
          }
        }
        let arr = this.info.list.filter((el) => !el.hidden)
        if (arr.findIndex((el) => el._id == this.activeName) == -1) {
          this.activeName = ''
          if (this.info.list.length) this.activeName = this.info.list.find((el) => !el.hidden)?._id || ''
        }
      },
      $startUsingPage(list) {
        this.setTabHidden(list, false)
        this.$pub(`SplitpaneResized_${this.previewPageId()}`, true)
      },
    },
  })
</script>
<style lang="scss" scoped>
  :deep() .el-tabs__nav-prev,
  :deep() .el-tabs__nav-next {
    line-height: 23px;
  }

  :deep() .el-tabs--left .el-tabs__header.is-left {
    margin-bottom: 0 !important;
    margin-right: 10px !important;
  }
</style>
